<template>
  <dv-border-box-4 class="left-chart-3 " :color="['#00CCFF','#00CCFF']">
    <MyChart :options="lineOptions" v-if="chartVisiable" />
  </dv-border-box-4>
</template>

<script>

import MyChart from "./widgets/MyChart";
import chartConfig from "./js/chartConfig";

export default {
  name: 'leachate_chart',
  components: {MyChart},
  props:{
    mdata:{
      require:true,
      type:Object
    }
  },
  data () {
    return {
      chartVisiable:false,
      lineOptions:{}
    }
  },
  mounted() {
    this.initChart();
  },
  methods:{
    initChart:function () {
      const lineData={
        xdata:this.mdata.xData,
        ydata:this.mdata.yData[0],
        title:this.mdata.title,
        name:this.mdata.names[0],
        unit:this.mdata.unit
      }
      this.lineOptions=chartConfig.lineChart(lineData);
      this.chartVisiable=true;
    }
  }
}
</script>

<style lang="scss" scoped>
.left-chart-3 {
  width: 100%;
  height: 33%;
  display: flex;
  font-size: 18px;
  font-weight: bold;
  padding: 30px 10px;

  .col-span{
    text-align: center;
  }

}
</style>
